import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { SelectC } from '../../form';
import { Tooltip } from 'antd';
import BussinessEdit from '../../../routes/InvestmentManage/BondTradeNew/TradForm1/ZqTradingCode/bussinessEditNew';
import './index.less';
import edit1 from '@/src/assets/comps/business/toolTipEdit.png';

class BusinessTargetC extends React.Component {
  constructor() {
    super();
    this.state = {
      editContent: {}, // 业务目标编辑内容
      bussniessVisible: false, // 业务目标编辑补充是否可见
      objectives: undefined, // 选中的业务目标
      objectivesEditObj: {}, // 缓存每一个业务目标对应的编辑
    };
  }

  static defaultProps = {
    title: '业务目标',
    initialValue: undefined, // 初始值
    disabled: false, // 下拉框的禁用状态
    info: {}, // 这个是从外部传入的详情的值,需要传入弹窗的详情 或者编辑的  注意 要定位到对象中的 trade几
    TaretType: 3, // 1-指令新增   2-簿记新增    3-簿记详情
    rightContentShow: true, // 默认展示右侧操作按钮
    getValue: () => {}, // 实时拿取业务目标的值
    getLayerValue: () => {}, // 这个是获取弹窗中的值
    onOk: () => {}, // 点击弹窗中保存成功后
    onRef: () => {}, // 组件引用
    onChangeFn: () => {}, // 改变
    getInfo: () => {}, // 获取表单中的值
    reset: () => {}, // 重置
    setSelect: () => {}, // 塞值
    setSelectAfter: () => {}, // 表单外部塞值之后的操作
  };

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);

    if (this.props.TaretType > 2) {
      // 详情时取业务目标的值
      // eslint-disable-next-line react/no-did-mount-set-state
      this.setState(
        {
          objectives: this.props.info ? this.props.info.bussinessObjectives : undefined,
          editContent: this.props.info ? this.props.info : {},
        },
        () => {
          // 可以将选择的值跑出去，后期使用的时候直接拿
          this.props.getValue && this.props.getValue(this.state.objectives);
          // 实时拿去弹窗中的表单值
          this.props.getLayerValue && this.props.getLayerValue(this.state.objectivesEditObj);
        },
      );
    } else {
      // 可以抛出当页面中是新增状态还是详情状态的值
      this.props.getValue && this.props.getValue(this.state.objectives);
      this.props.getLayerValue && this.props.getLayerValue(this.state.objectivesEditObj);
    }
  }

  componentDidUpdate(prevProps) {
    const { TaretType } = prevProps;
    if (this.props.info && prevProps.info) {
      if (JSON.stringify(this.props.info) != JSON.stringify(prevProps.info)) {
        if (TaretType > 2) {
          // 详情时取业务目标的值
          this.setState(
            {
              objectives: this.props.info ? this.props.info.bussinessObjectives : undefined,
              editContent: this.props.info ? this.props.info : {},
            },
            () => {
              // 可以将选择的值跑出去，后期使用的时候直接拿
              prevProps.getValue && prevProps.getValue(this.state.objectives);
              // 实时拿去弹窗中的表单值
              prevProps.getLayerValue && prevProps.getLayerValue(this.state.objectivesEditObj);
            },
          );
        } else {
          // 可以抛出当页面中是新增状态还是详情状态的值
          prevProps.getValue && prevProps.getValue(this.state.objectives);
          prevProps.getLayerValue && prevProps.getLayerValue(this.state.objectivesEditObj);
        }
      }
    }
  }

  // 获取此时的表单值
  getInfo = () => {
    const { validateFieldsAndScroll } = this.props.form;
    let query;
    validateFieldsAndScroll((err, fieldsValue) => {
      if (!err) {
        query = fieldsValue;
      }
    });
    return query;
  };

  // 对表单进行外部塞值
  setSelect = (value) => {
    const { form, dataIndex } = this.props;
    form.setFieldsValue({
      [dataIndex]: value,
    });
    // 右侧点击的按钮的状态需要发生改变
    this.setState(
      {
        objectives: value,
        editContent: this.props.info ? this.props.info : {},
      },
      () => {
        // 也可以进行其他操作
        this.props.setSelectAfter && this.props.setSelectAfter();
      },
    );
  };

  // 表单进行重置
  reset = () => {
    // 重置的时候 记得将弹窗中的内容清空
    const { dataIndex, form } = this.props;
    form.resetFields([dataIndex]);
    this.setState({
      editContent: {}, // 业务目标编辑内容
      bussniessVisible: false, // 业务目标编辑补充是否可见
      objectives: undefined, // 选中的业务目标
      objectivesEditObj: {},
    });
  };

  // 业务目标补充编辑弹窗
  bussiniessClick = () => {
    if (!this.state.objectives) return;
    const { objectivesEditObj, objectives } = this.state;
    if (this.props.TaretType < 3 || this.props.TaretType == 12) {
      // 编辑内容
      this.setState({
        editContent: objectivesEditObj[objectives] || {},
      });
    } else {
      this.setState({
        editContent: this.props.info ? this.props.info : {},
      });
    }
    this.setState({
      bussniessVisible: true,
    });
  };

  // 存储每一个业绩目标对应的补充编辑
  getObjectEdit = (e) => {
    const { objectives, objectivesEditObj } = this.state;
    objectivesEditObj[objectives] = e;
    this.setState(
      {
        objectivesEditObj,
      },
      () => {
        this.props.getLayerValue && this.props.getLayerValue(this.state.objectivesEditObj);
        this.props.onOk && this.props.onOk();
      },
    );
  };

  rightContent = () => {
    const { objectives } = this.state;
    return (
      <div className='flotRight'>
        <div>
          <Tooltip placement='top' title={'编辑业务目标'} overlayStyle={{ background: '#fff' }}>
            <div className='btnPlus' style={{ cursor: objectives ? 'pointer' : 'not-allowed' }} onClick={this.bussiniessClick}>
              <img src={edit1}></img>
            </div>
          </Tooltip>
        </div>
      </div>
    );
  };

  changeObjectives = (e) => {
    this.setState(
      {
        objectives: e,
      },
      () => {
        // 可使用 可以不使用
        this.props.getValue && this.props.getValue(this.state.objectives);
        this.props.onChangeFn && this.props.onChangeFn(e);
      },
    );
  };

  render() {
    const { bussniessVisible, objectives, editContent } = this.state;
    const {
      form,
      dataIndex,
      title,
      disabled,
      initialValue,
      rightContentShow,
      TaretType,
      globalM: {
        dataDictionary: { SPPI_BUSSINESS_OBJECTIVES: bussinessObjectivesList = [] },
      },
    } = this.props;
    return (
      <>
        <SelectC
          colon={false}
          form={form}
          dataIndex={dataIndex}
          title={title}
          disabled={disabled}
          initialValue={initialValue}
          dataSource={bussinessObjectivesList.map((item) => {
            return { value: item.code, title: item.value };
          })}
          onChange={this.changeObjectives}
          rightContent={rightContentShow && this.rightContent()}
          {...this.props}
        />
        {bussniessVisible && objectives && (
          <BussinessEdit
            form={form}
            info={editContent}
            type={TaretType}
            onClose={(e) => this.setState({ bussniessVisible: e })}
            objectives={objectives}
            getObjectEdit={this.getObjectEdit}
          />
        )}
      </>
    );
  }
}
BusinessTargetC.propsTypes = {
  title: PropTypes.string, // 标题
  disabled: PropTypes.bool, // 下拉框的禁用状态
  rightContentShow: PropTypes.bool, // 右侧的按钮是否展示出来
  SPPI_result: PropTypes.string, // sppi结果的值
  TaretType: PropTypes.number,
  SecuritiesCode: PropTypes.string, // 证券代码相关的信息 是一个对象包括exchangeCode、tradingCode
  sppITitle: PropTypes.string, // sppi点击按钮弹窗中的标题
};
export default connect(({ businessTargetM, globalM }) => ({ businessTargetM, globalM }))(BusinessTargetC);
